<template>
  <div class="password-change-form">
    <a-form
      :model="formState"
      :rules="rules"
      ref="formRef"
      layout="vertical"
      @finish="onFinish"
    >
      <a-form-item name="oldPassword" label="原密码" required>
        <a-input-password 
          v-model:value="formState.oldPassword" 
          placeholder="请输入原密码" 
          :maxLength="30"
        />
      </a-form-item>
      
      <a-form-item name="newPassword" label="新密码" required>
        <a-input-password 
          v-model:value="formState.newPassword" 
          placeholder="请输入新密码" 
          :maxLength="30"
        />
      </a-form-item>
      
      <a-form-item name="confirmPassword" label="确认新密码" required>
        <a-input-password 
          v-model:value="formState.confirmPassword" 
          placeholder="请再次输入新密码" 
          :maxLength="30"
        />
      </a-form-item>
      
      <a-form-item>
        <a-button 
          type="primary" 
          html-type="submit" 
          :loading="loading" 
          block
        >
          修改密码
        </a-button>
      </a-form-item>
    </a-form>
    
    <a-alert 
      v-if="changeSuccess" 
      type="success" 
      message="密码修改成功，请重新登录" 
      banner 
      class="success-alert"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { changePassword } from '@/api/user';

// 表单状态
const formState = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 加载状态
const loading = ref(false);
// 修改成功状态
const changeSuccess = ref(false);
// 表单引用
const formRef = ref(null);
// 路由
const router = useRouter();

// 表单验证规则
const rules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
    // 验证新密码不能与原密码相同
    {
      validator: (rule, value) => {
        if (value && value === formState.oldPassword) {
          return Promise.reject('新密码不能与原密码相同');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    // 验证两次输入的密码是否一致
    {
      validator: (rule, value) => {
        if (value && value !== formState.newPassword) {
          return Promise.reject('两次输入的密码不一致');
        }
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ]
};

// 提交表单
const onFinish = async (values) => {
  try {
    loading.value = true;
    
    // 调用修改密码接口
    await changePassword({
      oldPassword: values.oldPassword,
      newPassword: values.newPassword
    });
    
    // 显示成功信息
    changeSuccess.value = true;
    
    // 3秒后重定向到登录页
    setTimeout(() => {
      message.success('密码修改成功，请重新登录');
      // 登出并跳转到登录页
      router.push('/login');
    }, 3000);
    
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.password-change-form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.success-alert {
  margin-top: 20px;
}
</style> 